<template>
  <div class="box">
    <aside-box>
      <template #zh> 柱状图 </template>
      <template #en> bar chart </template>
      <div class="bar" ref="barRef"></div>
    </aside-box>
  </div>
</template>

<script lang="ts" setup>
import asideBox from "@/components/asideBox";

import * as echarts from "echarts";
const option = {
  title: {
    text: "",
  },

  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
      label: {
        backgroundColor: "#6a7985",
        Color: "#fff",
      },
    },
  },
  legend: {
    textStyle: {
      fontSize: 12,
      color: "#fff",
      fontFamily: "阿里妈妈数黑体 Bold",
    },
    data: ["上站流量", "下站流量"],
    itemWidth: 14,
    itemHeight: 14,
    itemGap: 30,
  },

  grid: {
    left: "5%",
    top: "40PX",
    right: "5%",
    bottom: "0%",
    containLabel: true,
  },
  xAxis: [
    {
      type: "category",
      // boundaryGap: false,
      //刻度线
      axisTick: {
        show: false,
      },
      data: ["皖西车站", "八楼车站", "沿海车站", "竹山车站", "天印车站"],
      axisLine: {
        lineStyle: {
          color: "#fff",
          width: 0, //这里是为了突出显示加上的
        },
      },
      axisLabel: {
        textStyle: {
          fontSize: 12,
          fontFamily: "阿里妈妈数黑体 Bold",
        },
      },
    },
  ],
  yAxis: [
    {
      type: "value",
      boundaryGap: [0.2, 0.2],
      //刻度线
      axisTick: {
        //y轴刻度线
        show: false,
      },
      //字体颜色
      axisLine: {
        lineStyle: {
          color: "#fff",
          width: 0, //这里是为了突出显示加上的
        },
      },
      axisLabel: {
        textStyle: {
          fontSize: 12,
          fontFamily: "阿里妈妈数黑体 Bold",
        },
      },
      //网格线
      splitLine: {
        show: true,
        lineStyle: {
          color: ["#23569b"],
          width: 1,
          type: "dashed",
        },
      },
    },
  ],
  color: ["#00c5d1", "#007dec"],
  series: [
    {
      name: "上站流量",
      type: "bar",
      barWidth: "14",
      barGap: 0,
      data: [600, 350, 700, 622, 430],
      itemStyle: {
        normal: {
          barBorderRadius: [40, 40, 0, 0],
          color: new echarts.graphic.LinearGradient(1, 0, 1, 1, [
            {
              offset: 0,
              color: "#00c7d2",
            },
            {
              offset: 0.5,
              color: "#0389b2",
            },
            {
              offset: 1,
              color: "#045595",
            },
          ]),
        },
      },
    },
    {
      name: "下站流量",
      type: "bar",
      barWidth: "14",
      barGap: 0,
      itemStyle: {
        normal: {
          barBorderRadius: [40, 40, 0, 0],
          color: new echarts.graphic.LinearGradient(1, 0, 1, 1, [
            {
              offset: 0,
              color: "#0083f5",
            },
            {
              offset: 0.5,
              color: "#0964c1",
            },
            {
              offset: 1,
              color: "#04479b",
            },
          ]),
        },
      },
      data: [500, 450, 300, 702, 230],
    },
  ],
};

const [barRef] = useEcharts(option);
</script>

<style lang="scss" scoped>
.box {
  background: rgb(8, 32, 63);
  .bar {
    width: 100%;
    height: 200px;
  }
}
</style>